<template>
  <el-card shadow="hover" v-loading="loading">
    <div slot="header" class="clearfix no-select">
      <div flex>
        <div flex-box="1">公告信息</div>
        <div flex-box="0">
          <el-pagination
            :hide-on-single-page="true"
            :total="total"
            small
            layout="slot, prev, next">
          </el-pagination>
        </div>
      </div>
    </div>


    <div class="no-select" style="min-height: 80px;">
      <div style="
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-around;
      ">

        <template v-for="item in list">
          <el-link style="" @click="showAnnounce(item)">
            <div flex style="display: flex; width: 300px;">
              <div flex-box="1">{{item.title}}</div>
              <div flex-box="0">{{formatDate(item.startTime)}}</div>
            </div>
          </el-link>
        </template>
      </div>
    </div>

    <el-dialog title="公告详情" append-to-body :visible.sync="dialogVisible" :close-on-click-modal="false" width="35%" @closed="onDialogClosed">

      <d2-container>
        <div slot="header">
          <h2>{{currentData.title}}</h2>
        </div>

        <div v-html="currentData.content"></div>

        <el-divider></el-divider>

        <div style="color: #999">
          <div style="float: right;">发布时间: {{currentData.createTime}}</div>
          <div>开始时间: {{formatDate(currentData.startTime)}}</div>
          <div>结束时间: {{formatDate(currentData.endTime)}}</div>
        </div>


      </d2-container>
      
      <div slot="footer">
        <el-button @click="dialogVisible = false" size="mini">关闭</el-button>
      </div>
    </el-dialog>


  </el-card>
</template>

<script>

import util from '@/libs/util';

import dayjs from 'dayjs'
import ApiMain from '@/api/index.announcement'

export default {
  mixins: [],
  components: {},
  data () {
    return {
      loading: false,
      list   : [],
      page   : 1,
      limit  : 6,
      total  : 0,

      dialogVisible: false,
      currentData: {},
    }
  },
  mounted () {
    this.fetchMainData();
  },
  beforeDestroy () {},
  methods: {
    
    formatDate (str) {
      return dayjs(str).format('YYYY-MM-DD')
    },

    async fetchMainData () {

      this.loading = true;

      try {
        var re = await ApiMain.list({page: this.page, limit: this.limit});
        this.list = re.list;
        this.total = re.total;
      } catch (err) {
        this.list = [];
        this.total = 0;
      }

      this.loading = false;
    },

    showAnnounce (data) {

      this.dialogVisible = true;

      this.currentData = data;
    },

    onDialogClosed () {
      this.currentData = {};
    },

  },
}
  
</script>

<style scoped>
  
</style>